<template>
  <div class="record">
    <nut-menu>
      <nut-menu-item v-model="statusActive" :options="statusOptions" />
      <nut-menu-item v-model="dateActive" :options="dateOptions" />
    </nut-menu>
    <!-- 表格 -->
    <nut-infinite-loading class="main_content" v-model="loading" @load-more="pullup">
      <nut-pull-refresh v-model="loading" @refresh="pulldown">
        <nut-table striped :bordered="false" :columns="columns">
          <template #nodata>
            <nut-empty :description="t('loginRecord_page_nodata')"></nut-empty>
          </template>
        </nut-table>
      </nut-pull-refresh>
    </nut-infinite-loading>
  </div>
</template>

<script setup lang="ts">
import PKwebsocket from "@/lolo/Ws";
import { NetPacket } from "@/netBase/NetPacket";
import { convertObjectToDateString } from "@/utils/publicMethods";
import { getTimeObj } from "@/views/records/common/timeData";
import { h, onBeforeMount, reactive, ref } from "vue";
import { useI18n } from "vue-i18n";
import {
  CurrencyMap,
  RechagreStatusColorMap,
  RechagreStatusMap,
} from "@/enums/walletEnum";
const { t } = useI18n();

const columns = ref([
  { title: t("rechargeRecord_page_method"), key: "way_id", size: "2.5" },
  { title: t("accountsRecord_page_hb"), key: "currency", size: "2.5" },
  { title: t("rechargeRecord_page_amount"), key: "pay_money", size: "2" },
  { title: t("auditRecord_page_state"), key: "status", size: "2" },
  { title: t("auditRecord_page_startTime"), key: "pay_time", size: "2.5" },
]);
// 数据
const data = ref([]);
// 菜单选择
const dateActive = ref(1);
const dateOptions = ref([
  { text: t("today"), value: 1 },
  { text: t("yesterday"), value: -1 },
  { text: t("day7"), value: -7 },
]);
const statusActive = ref(9);
const statusOptions = ref([
  { text: t("rechargeRecord_page_allState"), value: 9 },
  { text: t("rechagre_status_map_0"), value: 0 },
  { text: t("rechagre_status_map__1"), value: -1 },
  { text: t("rechagre_status_map_1"), value: 1 },
  { text: t("rechagre_status_map_2"), value: 2 },
]);

const loading = ref(false);
const result: any = reactive({
  // 结果
  total_page: 0,
  list: [],
});
const wayMap: any = ref({}); // 充值记录-支付方式
// const waysHandle = (rs: any) => {
//   rs.rechargelist_by_paymenttype.forEach((item: any) => {
//     wayMap.value[item.paymenttype] = item.payname;
//   });
// };
const resultHandle = (rs: any) => {
  // 数据处理

  let list = data.value.concat(rs.recharge_record_list).sort((a: any, b: any) => {
    return (
      Date.parse(convertObjectToDateString(b.pay_time)) -
      Date.parse(convertObjectToDateString(a.pay_time))
    );
  });
  list.map((e: any) => {
    e.way_id = e.way_id && wayMap[e.way_id] ? t(wayMap[e.way_id]) : e.way_id;
    e.currency = CurrencyMap()[1];
    e.pay_time = convertObjectToDateString(e.pay_time);
    e.pay_money = Number(e.pay_money).toLocaleString();
    e.status = () => {
      const props = {
        style: {
          color: RechagreStatusColorMap[e.order_status],
        },
      };
      return h("view", props, RechagreStatusMap()[e.order_status]);
    };
  });
  data.value = list;
};

const page: any = ref(1);
const queryData = () => {
  const query = NetPacket.req_get_recharge_record_list();
  Object.assign(query.start_time, getTimeObj(dateActive.value).start_time);
  Object.assign(query.end_time, getTimeObj(dateActive.value).end_time);
  query.page = page.value;
  query.status = statusActive.value;
  query.currency = 0;
  PKwebsocket.instance.send(query, true, {
    callbackName: 'msg_notify_get_recharge_record_list',
    callback: resultHandle
  })
};

// 加载更多
const pullup = () => {
  if (result.total_page <= result.list.length) return (loading.value = false);
  page.value++;
  queryData();
};
// 刷新数据
const pulldown = () => {
  resetData();
};
// 重置数据
const resetData = () => {
  result.total_page = 0;
  result.list = [];
  page.value = 1;
  queryData();
};
onBeforeMount(() => {
  queryData();
});
</script>

<style lang="scss" scoped>
.record {
  margin-top: 20px;
  padding: 0 14px;
  min-height: 100%;

  :deep(.nut-menu .nut-menu__bar) {
    justify-content: space-between;

    .nut-menu__item {
      height: 44px;
      border-radius: 8px;
      background: #131232;
      box-shadow: 0.5px 0.5px 1px 0px #2e296b inset;
      margin-right: 10px;

      .nut-menu__title {
        height: 100%;
        padding: 0 14px;
      }
    }

    :last-child {
      margin: 0;
    }
  }

  :deep(.nut-table__nodata) {
    height: auto;
  }

  :deep(.nut-table__main--striped) {
    .nut-table__main__body__tr:nth-child(odd) {
      background-color: #1b1a44;
    }

    .nut-table__main__body__tr:nth-child(even) {
      background-color: #131232;
    }
  }

  :deep(.nut-table__main) {
    display: block;
    margin-top: 14px;

    .nut-table__main__body,
    .nut-table__main__head {
      display: flex;
      width: 100%;
    }

    .nut-table__main__body {
      flex-direction: column;

      .nut-table__main__body__tr {
        width: auto;
        height: 48px;
        justify-content: space-between;
        padding: 0 10px;
        display: flex;

        span:last-child {
          font-size: 10px;
        }

        > span {
          text-align: center;
          padding: 0;
          width: 20%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }

    .nut-table__main__head__tr {
      background-color: #394eff;
      display: flex;
      width: 100%;
      align-items: center;
      height: 44px;
      color: #fff;
      font-size: 12px;
      justify-content: space-between;
      padding: 0 10px;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;

      > span {
        line-height: 26px;
        padding: 0;
        width: 20%;
        display: flex;
        justify-content: center;
      }
    }
  }
}
</style>
